<template>
  <div>
      <Row>
        <Form
          ref="searchForm"
          :model="tuiguangSearchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="手机号" prop="mobile">
            <Input
              type="text"
              v-model="tuiguangSearchForm.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="下单时间">
            <DatePicker
              v-model="selectDate"
              type="datetimerange"
              format="yyyy-MM-dd"
              clearable
              @on-change="selectDateRange"
              placeholder="选择起始时间"
              style="width: 300px"
            ></DatePicker>
          </Form-item>
          <Button
            @click="getOrderData"
            type="primary"
            icon="ios-search"
            class="search-btn"
            >搜索</Button
          >
          <Button
                @click="unbindHandle"
                type="primary"
                class="search-btn Unbind"
                >解绑会员</Button
              >
        </Form>
      </Row>
      <div style="min-height: 180px">
        <Table
          :loading="loading"
          border
          ref="selection"
          :columns="tuiguangColumns"
          :data="orderData"
          class="mt_10"
          @on-selection-change="selectionChange"
        >
        </Table>
        <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
          <Page
            :current="tuiguangSearchForm.pageNumber"
            :total="orderTotal"
            :page-size="tuiguangSearchForm.pageSize"
            @on-change="orderChangePage"
            @on-page-size-change="orderChangePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </div>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";

export default {
  name: "tuiguang",
  components: {
    region,
    ossManage,
    liliMap,
  },
  props: {
    memberId: {
      type: String,
    }
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      detailData: [], //会员信息头部端口费用数据
      selectDate: null, // 选择时间段
      tuiguangColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "会员昵称",
          key: "nickName",
          tooltip: true,
          width: "100",
        },
        {
          title: "手机号码",
          key: "mobile",
          tooltip: true,
          width: "120",
        },
        {
          title: "级别",
          key: "gradeIdName",
          width: "100",
        },
        {
          title: "区域",
          key: "locationName",
        },
        {
          title: "推广时间",
          key: "receivableNo",
        },
        {
          title: "会员费累计额",
          key: "incomeTime",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.incomeTime, "焕贝")
            );
          },
        },
        {
          title: "会员费分佣",
          key: "yiBei",
          render: (h, params) => {
            return h(
              "div",
              this.$options.filters.unitPrice(params.row.yiBei, "焕贝")
            );
          },
        },
        {
          title: "消费焕贝总额",
          key: "cash",
          render: (h, params) => {
            if (params.row.cash) {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.cash, "焕贝")
              );
            }
          },
        },
        {
          title: "C端消费分佣",
          key: "cash",
          render: (h, params) => {
            if (params.row.cash) {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.cash, "焕贝")
              );
            }
          },
        },
        {
          title: "c充值钱包焕贝余额",
          key: "cash",
          render: (h, params) => {
            if (params.row.cash) {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.cash, "焕贝")
              );
            }
          },
        },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      tuiguangSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        start: "",
        startDate: "",
        endDate: "",
      },
      choseIds:[]//选中解绑的数据
    };
  },
  methods: {
    init() {
      //收入
      this.getOrderData();
    },
     // 解绑会员
    unbindHandle() {
      if(this.choseIds.length<1){
          this.$Message.warning('请选择要解绑的会员')
      }else{
        this.$Modal.confirm({
        title: "解绑会员",
        content: "<p>解除绑定关系的会员，将归属平台</p>",
        onOk: () => {
          API_Member.updateMemberStatus(this.choseIds).then((res) => {
            if (res.success) {
              this.$Message.success("解绑成功");
              this.getData();
            } else {
              // this.$Message.error(res.message);
            }
          });
        },
      });
      }
      
    },
     // 收入起止时间从新赋值
    selectDateRange(v) {
      if (v) {
        this.tuiguangSearchForm.startDate = v[0];
        this.tuiguangSearchForm.endDate = v[1];
      }
    },
      getOrderData() {
      this.loading = true;
      this.tuiguangSearchForm.memberId = this.memberId;
      API_Order.getIncome(this.tuiguangSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderData = res.result.records;
          this.orderTotal = res.result.total;
        }
      });
    },
     //收入
    orderChangePage(v) {
      this.tuiguangSearchForm.pageNumber = v;
      this.getOrderData();
    },
    //收入
    orderChangePageSize(v) {
      this.tuiguangSearchForm.pageNumber = 1;
      this.tuiguangSearchForm.pageSize = v;
      this.getOrderData();
    },
    // 推广会员多选，筛选出对应的id
    selectionChange(val) {
      this.choseIds = val.map((item) => item.memberId);
    },
  },

  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "../../user-partner-detail.scss";
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
